<template>
  <div class="app-container">
    <el-card>
      <el-page-header :content="title" @back="goBack" />
      <el-table :data="testData" stripe style="width: 100%;margin-top: 1rem">
        <el-table-column prop="name" label="名字" />
        <el-table-column prop="permission" label="权限" />
        <el-table-column prop="owner" label="所有者" />
        <el-table-column prop="group" label="所属组" />
        <el-table-column prop="size" label="大小">
          <template slot-scope="scope">
            {{ scope.row.size }} bytes
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link icon="el-icon-edit" type="primary" @click="getTestDataByName(scope.row.name)">修改</el-link>
            <el-link
              v-if="scope.row.name!=='sample.in'&&scope.row.name!=='sample.out'&&scope.row.name!=='test0.in'&&scope.row.name!=='test0.out'"
              icon="el-icon-delete"
              style="margin-left: 1rem"
              type="danger"
              @click="deleteTestData(scope.row.name)"
            >删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-button style="margin-top: 1rem" type="primary" @click="dialogVisible = true">添加数据</el-button>
        <el-dialog
          title="输入测试数据"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :show-close="false"
          width="80%"
          top="5vh"
        >
          <el-row>
            <el-col :lg="12" :md="12">
              <el-input
                v-model="inputTestData"
                type="textarea"
                :autosize="{ minRows: 20, maxRows: 20}"
                placeholder="请输入标准的输入数据"
              />
            </el-col>
            <el-col :lg="12" :md="12">
              <el-input
                v-model="outputTestData"
                type="textarea"
                :autosize="{ minRows: 20, maxRows: 20}"
                placeholder="请输入标准的输出数据"
              />
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button v-if="!isUpdate" type="primary" @click="addTestData">确定添加</el-button>
            <el-button v-if="isUpdate" type="primary" @click="updateTestDataByName(name)">确定修改</el-button>
          </span>
        </el-dialog>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { addTestData, deleteTestData, getTestData, getTestDataByName, updateTestDataByName } from '@/api/problem'

export default {
  data() {
    return {
      problemId: -1,
      testData: [],
      dialogVisible: false,
      isUpdate: false,
      inputTestData: '',
      outputTestData: '',
      name: '',
      title: '数据编辑'
    }
  },
  created() {
  },
  mounted() {
    if (this.$route.query.problemId !== undefined) {
      this.problemId = this.$route.query.problemId
      this.getTestData()
    } else {
      this.$message({ message: '请通过题目列表处进入此页面', type: 'warning' })
      this.$router.back()
    }
    this.title = this.$route.query.title
  },
  methods: {
    closeDialog() {
      if (this.isUpdate) {
        this.inputTestData = ''
        this.outputTestData = ''
        this.isUpdate = false
        this.name = ''
      }
      this.dialogVisible = false
    },
    getTestDataByName(name) {
      getTestDataByName({ name: name.split('.')[0], problemId: this.problemId })
        .then(res => {
          this.dialogVisible = true
          this.inputTestData = res.data[0]
          this.outputTestData = res.data[1]
          this.name = name.split('.')[0]
          this.isUpdate = true
        })
    },
    addTestData() {
      if (this.outputTestData.length <= 0) {
        this.$message({ message: '输出数据是必填项', type: 'warning' })
        return
      }
      const data = new FormData()
      data.set('problemId', this.problemId)
      data.set('name', this.testData[this.testData.length - 1].name.split('.')[0])
      data.set('inputTestData', this.inputTestData)
      data.set('outputTestData', this.outputTestData)
      addTestData(data).then(res => {
        if (res.data) {
          this.dialogVisible = false
          this.$message({ message: res.message, type: 'success' })
          this.inputTestData = ''
          this.outputTestData = ''
          this.isUpdate = false
          this.name = ''
          this.getTestData()
        }
      })
    },
    updateTestDataByName(name) {
      if (name.indexOf('test') === -1 && name.indexOf('sample') === -1) {
        this.$message.error('出错了，请刷新页面重试吧！')
        return
      }
      if (this.outputTestData.length <= 0) {
        this.$message({ message: '输出数据是必填项', type: 'warning' })
        return
      }
      const data = new FormData()
      data.set('problemId', this.problemId)
      data.set('name', name)
      data.set('inputTestData', this.inputTestData)
      data.set('outputTestData', this.outputTestData)
      updateTestDataByName(data).then(res => {
        if (res.data) {
          this.dialogVisible = false
          this.$message({ message: res.message, type: 'success' })
          this.inputTestData = ''
          this.outputTestData = ''
          this.isUpdate = false
          this.name = ''
          this.getTestData()
        }
      })
    },
    deleteTestData(name) {
      this.$confirm('此操作将同时删除输入输出数据，可能会导致题目测试异常，建议使用修改功能，是否继续删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        const n = name.split('.')[0]
        if (n === 'sample' || n === 'test0') {
          this.$message({ message: '基础测试数据禁止删除！', type: 'warning' })
          return
        }
        deleteTestData({ name: n, problemId: this.problemId }).then(res => {
          if (res.data) {
            this.$message({ message: '测试数据删除成功！', type: 'success' })
            this.getTestData()
          }
        })
      })
    },
    getTestData() {
      if (this.problemId === -1) {
        this.$message({ message: '请通过题目列表处进入此页面', type: 'warning' })
        return
      }
      getTestData({ problemId: this.problemId }).then(res => {
        this.testData = res.data
      })
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>
